/*
 * @Description: 饼状图
 * @Author: Zzt
 * @Date: 2022-11-10 09:19:30
 * @LastEditTime: 2022-12-20 17:25:57
 */

import { useEcharts } from '@/hooks/useEcharts';
import * as echarts from 'echarts';
import { useMemo } from 'react';

interface IBarCharts {
  xdata: any;
  ydata: any;
  type: 'line' | 'bar';
}
const BarCharts = (props: IBarCharts) => {
  const { xdata, ydata, type } = props;
  const length = ydata?.length || 1;
  const jiaodu = length > 6 ? 30 : 0;
  console.log('传来了datax', xdata, ydata);
  const option: echarts.EChartsOption = {
    // color,
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: ydata,
      axisLabel: {
        interval: 0,
        rotate: jiaodu
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: xdata,
        type
      }
    ]
  };

  const [echartsRef] = useEcharts(option);

  // option && myChart.setOption(option);
  return (
    <>
      {useMemo(
        () => (
          <div style={{ height: '300px' }} ref={echartsRef}></div>
        ),
        [echartsRef]
      )}
    </>
  );
};
export default BarCharts;
